<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>业力分析报表</a-breadcrumb-item>
      <a-breadcrumb-item>道德水平趋势</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">道德水平趋势</div>
        <div class="header-subtitle">阴曹地府 · 道德变迁分析</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card current-stat">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">当前道德指数</div>
              <div class="stat-value">{{ currentMoralIndex }}</div>
              <div class="stat-label">分</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card trend-stat">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">年度增长率</div>
              <div class="stat-value">{{ yearlyGrowthRate }}%</div>
              <div class="stat-label">同比上升</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card forecast-stat">
            <div class="stat-icon">
              <LineChartOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">预测指数</div>
              <div class="stat-value">{{ forecastIndex }}</div>
              <div class="stat-label">明年预期</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card stability-stat">
            <div class="stat-icon">
              <SafetyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">稳定系数</div>
              <div class="stat-value">{{ stabilityCoeff }}</div>
              <div class="stat-label">波动度</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 道德水平历史趋势 -->
        <a-col :xs="24" :lg="12">
          <a-card title="道德水平历史趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendTimeRange" style="width: 120px">
                <a-select-option value="5">近5年</a-select-option>
                <a-select-option value="10">近10年</a-select-option>
                <a-select-option value="20">近20年</a-select-option>
                <a-select-option value="50">近50年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="moralTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 道德指标构成分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="道德指标构成分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="moralCompositionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 月度道德波动 -->
        <a-col :xs="24" :lg="12">
          <a-card title="月度道德波动分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="monthlyYear" style="width: 100px">
                <a-select-option value="2024">2024年</a-select-option>
                <a-select-option value="2023">2023年</a-select-option>
                <a-select-option value="2022">2022年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="monthlyFluctuationOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 道德预测模型 -->
        <a-col :xs="24" :lg="12">
          <a-card title="道德水平预测模型" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="predictionModel" style="width: 120px">
                  <a-select-option value="linear">线性模型</a-select-option>
                  <a-select-option value="polynomial">多项式</a-select-option>
                  <a-select-option value="exponential">指数模型</a-select-option>
                </a-select>
                <a-select v-model:value="predictionPeriod" style="width: 100px">
                  <a-select-option value="6">6个月</a-select-option>
                  <a-select-option value="12">1年</a-select-option>
                  <a-select-option value="24">2年</a-select-option>
                </a-select>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="predictionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 地区道德对比 -->
        <a-col :xs="24">
          <a-card title="地区道德水平对比" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="regionCompareType" style="width: 120px">
                  <a-select-option value="current">当前水平</a-select-option>
                  <a-select-option value="growth">增长率</a-select-option>
                  <a-select-option value="stability">稳定性</a-select-option>
                </a-select>
                <a-button @click="exportRegionData">
                  <DownloadOutlined />
                  导出
                </a-button>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="regionComparisonOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 影响因子分析 -->
        <a-col :xs="24" :lg="16">
          <a-card title="道德水平影响因子分析" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="influenceFactorOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 趋势分析报告 -->
        <a-col :xs="24" :lg="8">
          <a-card title="趋势分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>当前态势</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>道德水平整体上升</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator neutral"></div>
                  <span>部分指标波动稳定</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator warning"></div>
                  <span>青年群体需要关注</span>
                </div>
              </div>

              <div class="report-section">
                <h4>关键指标变化</h4>
                <div class="indicator-list">
                  <div class="indicator-item">
                    <span class="indicator-name">诚信指数</span>
                    <span class="indicator-change positive">+5.2%</span>
                  </div>
                  <div class="indicator-item">
                    <span class="indicator-name">善行频率</span>
                    <span class="indicator-change positive">+3.8%</span>
                  </div>
                  <div class="indicator-item">
                    <span class="indicator-name">互助精神</span>
                    <span class="indicator-change positive">+7.1%</span>
                  </div>
                  <div class="indicator-item">
                    <span class="indicator-name">责任感</span>
                    <span class="indicator-change neutral">+0.5%</span>
                  </div>
                  <div class="indicator-item">
                    <span class="indicator-name">环保意识</span>
                    <span class="indicator-change positive">+12.3%</span>
                  </div>
                </div>
              </div>

              <div class="report-section">
                <h4>预期趋势</h4>
                <ul class="trend-list">
                  <li>未来6个月道德指数将稳步提升</li>
                  <li>环保意识增长将成为主要驱动力</li>
                  <li>科技伦理关注度将显著提高</li>
                  <li>代际差异可能进一步缩小</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>建议措施</h4>
                <ul class="suggestion-list">
                  <li>加强青年道德教育</li>
                  <li>推广优秀道德榜样</li>
                  <li>完善道德评价体系</li>
                  <li>营造良好社会氛围</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { TrophyOutlined, RiseOutlined, LineChartOutlined, SafetyOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, RadarChart, ScatterChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, RadarChart, ScatterChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent])

// 响应式数据
const loading = ref(false)
const trendTimeRange = ref('20')
const monthlyYear = ref('2024')
const predictionModel = ref('polynomial')
const predictionPeriod = ref('12')
const regionCompareType = ref('current')

// 核心指标数据
const currentMoralIndex = ref('78.5')
const yearlyGrowthRate = ref('+2.8')
const forecastIndex = ref('80.7')
const stabilityCoeff = ref('0.15')

// 生成历史趋势数据
const generateTrendData = (years) => {
  const data = []
  const startYear = 2024 - years + 1

  for (let i = 0; i < years; i++) {
    const year = startYear + i
    // 模拟长期上升趋势，但有适度波动
    const baseValue = 65 + i * 0.8 + Math.sin(i * 0.5) * 2 + Math.random() * 1.5
    data.push({
      year: year,
      value: parseFloat(baseValue.toFixed(1))
    })
  }

  return data
}

// 道德水平历史趋势图
const moralTrendOption = computed(() => {
  const trendData = generateTrendData(parseInt(trendTimeRange.value))
  const years = trendData.map((item) => item.year)
  const values = trendData.map((item) => item.value)

  return {
    title: {
      text: '道德指数历史变化',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: '{b}年<br/>道德指数: {c}分'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: years,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '道德指数',
      min: 60,
      max: 85,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100,
        height: 30,
        bottom: 20
      }
    ],
    series: [
      {
        name: '道德指数',
        type: 'line',
        smooth: true,
        data: values,
        lineStyle: {
          width: 4,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: '#667eea' },
              { offset: 1, color: '#764ba2' }
            ]
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(102, 126, 234, 0.4)' },
              { offset: 1, color: 'rgba(118, 75, 162, 0.1)' }
            ]
          }
        },
        markPoint: {
          data: [
            { type: 'max', name: '历史最高' },
            { type: 'min', name: '历史最低' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: '平均值' }]
        }
      }
    ]
  }
})

// 道德指标构成雷达图
const moralCompositionOption = computed(() => {
  return {
    title: {
      text: '道德指标构成',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['当前水平', '历史平均', '目标水平'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    radar: {
      indicator: [
        { name: '诚信度', max: 100 },
        { name: '善良度', max: 100 },
        { name: '勇敢度', max: 100 },
        { name: '智慧度', max: 100 },
        { name: '正义感', max: 100 },
        { name: '责任心', max: 100 },
        { name: '同情心', max: 100 },
        { name: '自律性', max: 100 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)']
        }
      },
      axisLine: { lineStyle: { color: '#666' } },
      splitLine: { lineStyle: { color: '#666' } }
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [82, 78, 75, 80, 85, 79, 83, 77],
            name: '当前水平',
            lineStyle: { color: '#52c41a' },
            areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
          },
          {
            value: [75, 72, 68, 74, 78, 73, 76, 70],
            name: '历史平均',
            lineStyle: { color: '#1890ff' },
            areaStyle: { color: 'rgba(24, 144, 255, 0.3)' }
          },
          {
            value: [90, 88, 85, 87, 92, 86, 89, 84],
            name: '目标水平',
            lineStyle: { color: '#faad14' },
            areaStyle: { color: 'rgba(250, 173, 20, 0.3)' }
          }
        ]
      }
    ]
  }
})

// 月度波动图
const monthlyFluctuationOption = computed(() => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const currentYear = [76.2, 76.8, 77.1, 77.5, 78.0, 78.2, 78.5, 78.8, 78.9, 79.1, 78.7, 78.5]
  const lastYear = [74.5, 75.1, 75.8, 76.2, 76.9, 77.3, 77.1, 77.4, 77.8, 78.0, 77.6, 77.2]

  return {
    title: {
      text: '月度道德指数波动',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['2024年', '2023年'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '道德指数',
      min: 74,
      max: 80,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '2024年',
        type: 'line',
        smooth: true,
        data: currentYear,
        lineStyle: { color: '#ff7875', width: 3 },
        itemStyle: { color: '#ff7875' },
        markArea: {
          silent: true,
          itemStyle: {
            color: 'rgba(255, 120, 117, 0.1)'
          },
          data: [[{ xAxis: '6月' }, { xAxis: '9月' }]]
        }
      },
      {
        name: '2023年',
        type: 'line',
        smooth: true,
        data: lastYear,
        lineStyle: { color: '#74b9ff', width: 3 },
        itemStyle: { color: '#74b9ff' }
      }
    ]
  }
})

// 预测模型图
const predictionOption = computed(() => {
  const historicalMonths = ['10月', '11月', '12月']
  const predictionMonths = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const historicalData = [79.1, 78.7, 78.5]

  // 生成预测数据
  const generatePrediction = () => {
    const data = []
    let base = 78.5

    for (let i = 0; i < 12; i++) {
      switch (predictionModel.value) {
        case 'linear':
          base += 0.15 + Math.random() * 0.1
          break
        case 'polynomial':
          base += 0.1 + 0.02 * i + Math.random() * 0.1
          break
        case 'exponential':
          base *= 1.002 + Math.random() * 0.001
          break
      }
      data.push(parseFloat(base.toFixed(1)))
    }
    return data
  }

  const predictionData = generatePrediction()

  return {
    title: {
      text: `道德水平预测 (${predictionModel.value})`,
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['历史数据', '预测数据', '置信区间'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: [...historicalMonths, ...predictionMonths],
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: '道德指数',
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '历史数据',
        type: 'line',
        data: [...historicalData, ...Array(12).fill(null)],
        lineStyle: { width: 3, color: '#74b9ff' },
        itemStyle: { color: '#74b9ff' }
      },
      {
        name: '预测数据',
        type: 'line',
        data: [...Array(3).fill(null), ...predictionData],
        lineStyle: { width: 3, color: '#ff7875', type: 'dashed' },
        itemStyle: { color: '#ff7875' }
      }
    ]
  }
})

// 地区对比图
const regionComparisonOption = computed(() => {
  const regions = ['华北', '东北', '华东', '华中', '华南', '西北', '西南', '港澳台']

  let data, title, unit
  switch (regionCompareType.value) {
    case 'growth':
      data = [2.1, 1.8, 3.2, 2.5, 3.8, 2.0, 2.3, 4.2]
      title = '地区道德指数增长率'
      unit = '%'
      break
    case 'stability':
      data = [0.12, 0.18, 0.08, 0.15, 0.09, 0.21, 0.16, 0.07]
      title = '地区道德指数稳定性'
      unit = ''
      break
    default:
      data = [78.2, 76.5, 82.1, 79.3, 83.5, 74.8, 77.9, 85.2]
      title = '地区道德指数水平'
      unit = '分'
  }

  return {
    title: {
      text: title,
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' },
      formatter: `{b}<br/>{a}: {c}${unit}`
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: regions,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' }
    },
    yAxis: {
      type: 'value',
      name: `值 (${unit})`,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '指标值',
        type: 'bar',
        data: data,
        itemStyle: {
          color: function (params) {
            const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']
            return colors[params.dataIndex]
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 影响因子分析
const influenceFactorOption = computed(() => {
  const factors = ['教育水平', '经济发展', '文化传统', '法制环境', '媒体引导', '社会保障', '科技发展', '国际交流']
  const influence = [0.85, 0.72, 0.68, 0.79, 0.63, 0.58, 0.45, 0.38]
  const correlation = [0.78, 0.65, 0.71, 0.82, 0.59, 0.52, 0.41, 0.35]

  return {
    title: {
      text: '道德水平影响因子',
      left: 'center',
      textStyle: { color: '#d4990a', fontSize: 16 }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['影响强度', '相关系数'],
      top: 30,
      textStyle: { color: '#fff' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: factors,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999', rotate: 45 }
    },
    yAxis: {
      type: 'value',
      name: '影响程度',
      max: 1,
      axisLine: { lineStyle: { color: '#666' } },
      axisLabel: { color: '#999' },
      splitLine: { lineStyle: { color: '#333' } }
    },
    series: [
      {
        name: '影响强度',
        type: 'bar',
        data: influence,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#667eea' },
              { offset: 1, color: '#764ba2' }
            ]
          }
        }
      },
      {
        name: '相关系数',
        type: 'line',
        data: correlation,
        lineStyle: { color: '#ff7875', width: 3 },
        itemStyle: { color: '#ff7875' }
      }
    ]
  }
})

// 导出数据
const exportRegionData = () => {
  message.success('地区数据导出成功')
}

onMounted(() => {
  loading.value = false
})
</script>

<style scoped>
.statistics-page {
  padding: 24px;
  min-height: 100vh;
}

.page-breadcrumb {
  margin-bottom: 16px;
}

.page-breadcrumb :deep(.ant-breadcrumb-link) {
  color: #d4990a;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 32px;
}

.header-content {
  margin-bottom: 16px;
}

.ancient-title {
  font-size: 32px;
  font-weight: bold;
  color: #d4990a;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-family: 'STKaiti', 'KaiTi', serif;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #8fa4b8;
  font-family: 'STKaiti', 'KaiTi', serif;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.decoration-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4990a, transparent);
}

.decoration-symbol {
  color: #d4990a;
  font-size: 20px;
}

.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 32px;
  opacity: 0.8;
}

.current-stat .stat-icon {
  color: #d4990a;
}
.trend-stat .stat-icon {
  color: #52c41a;
}
.forecast-stat .stat-icon {
  color: #1890ff;
}
.stability-stat .stat-icon {
  color: #722ed1;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #b3c5d1;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #8fa4b8;
}

.main-content {
  margin-top: 32px;
}

.chart-card :deep(.ant-card-head),
.report-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.chart-card :deep(.ant-card-head-title),
.report-card :deep(.ant-card-head-title) {
  color: #d4990a;
  font-weight: 600;
}

.chart-card :deep(.ant-card-body),
.report-card :deep(.ant-card-body) {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 0 0 8px 8px;
}

.chart-container {
  width: 100%;
}

.report-content {
  color: #fff;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #d4990a;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
}
.status-indicator.neutral {
  background: #faad14;
}
.status-indicator.warning {
  background: #ff7875;
}

.indicator-list {
  margin-bottom: 16px;
}

.indicator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.indicator-item:last-child {
  border-bottom: none;
}

.indicator-name {
  color: #b3c5d1;
  font-size: 14px;
}

.indicator-change {
  font-weight: 600;
  font-size: 14px;
}

.indicator-change.positive {
  color: #52c41a;
}
.indicator-change.neutral {
  color: #faad14;
}
.indicator-change.negative {
  color: #ff7875;
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
}

.trend-list li,
.suggestion-list li {
  padding: 6px 0;
  border-left: 3px solid #d4990a;
  padding-left: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #b3c5d1;
  font-size: 14px;
}
</style>
